<template
	><el-tree :data="data" :props="defaultProps" :default-expand-all="true">
		<template #default="{ node, data }">
			<span class="custom-tree-node">
				<span class="Horizontalspacing interval">
					<span class="bold">{{ node.label }}</span>
					<span v-if="data.vidoid" class="center Gray">{{ data.duration }}</span>
				</span>
				<el-button v-if="data.vidoid" type="danger" link @click="handleNodeClick(data)"
					>播放
					<el-icon class="el-icon--right"><VideoPause v-if="data.$treeNodeId == index.$treeNodeId" /> <VideoPlay v-else /> </el-icon>
				</el-button>
			</span>
		</template>
	</el-tree>
</template>

<script>
export default {
	props: ['next', 'data'],
	data() {
		return {
			index: '',
			defaultProps: {
				children: 'children',
				label: 'title',
			},
		}
	},
	methods: {
		handleNodeClick(data) {
			//传给父组件  并且将当前数据存起来 方便查找下一个视频
			console.log(data)
			this.$emit('custom-event', data.vidoid)
			// 这里寻找上级附件 把视频地址传给父组件  父组建再传给视频组建
			this.index = data
		},
		tonext() {
			const nextNode = this.findNextNodeWithUrl(this.index)

			if (nextNode && nextNode.vidoid) {
				this.index = nextNode
				console.log('下一个视频地址：', nextNode.vidoid)
				this.$emit('custom-event', nextNode.vidoid)
			} else {
				console.log('下一个节点没有视频地址')
			}
		},
		// 查找下一个带有视频地址的节点
		findNextNodeWithUrl(currentNode) {
			// 首先，查找当前节点在父节点的子节点列表中的索引
			const parent = this.findParentNode(this.data, currentNode)
			if (parent !== null) {
				const index = parent.children.indexOf(currentNode)
				// 然后，在同级节点中查找下一个带有视频地址的节点
				for (let i = index + 1; i < parent.children.length; i++) {
					if (parent.children[i].vidoid) {
						return parent.children[i]
					}
				}
			}
			// 如果没有下一个同级节点，继续向上查找父级节点的同级节点
			return parent ? this.findNextNodeWithUrl(parent) : null
		},

		// 查找节点的父节点
		findParentNode(nodes, targetNode) {
			for (let i = 0; i < nodes.length; i++) {
				if (nodes[i].children && nodes[i].children.includes(targetNode)) {
					return nodes[i]
				}
				if (nodes[i].children) {
					const parentNode = this.findParentNode(nodes[i].children, targetNode)
					if (parentNode !== null) {
						return parentNode
					}
				}
			}
			return null
		},
	},
	watch: {
		next(newMedium) {
			// 在 medium 属性发生变化时重新初始化播放器
			this.tonext()
		},
	},
}
</script>

<style>
.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 8px;
}
.Gray {
	color: var(--el-color-info-light-3) !important;
}
</style>
